@use "sass:map";
@use "sass:color";
@use "sass:math";
@use "sass:string";
@use "sass:meta";
@use "../../node_modules/element-plus/theme-chalk/src/common/var.scss" as common;
@use "../../node_modules/element-plus/theme-chalk/src/dark/var.scss" as dark;

/* theme color types */
$color-types: (
    // 紫色主题
    "purple":
        (
            "white": #ffffff,
            "black": #000000,
            "primary": (
                "base": #9c27b0,
            ),
            "success": (
                "base": #7cb342,
            ),
            "warning": (
                "base": #ff9800,
            ),
            "danger": (
                "base": #e91e63,
            ),
            "error": (
                "base": #e91e63,
            ),
            "info": (
                "base": #607d8b,
            ),
        ),
    // 橙色主题
    "orange":
        (
            "white": #ffffff,
            "black": #000000,
            "primary": (
                "base": #ff9800,
            ),
            "success": (
                "base": #4caf50,
            ),
            "warning": (
                "base": #ffc107,
            ),
            "danger": (
                "base": #f44336,
            ),
            "error": (
                "base": #f44336,
            ),
            "info": (
                "base": #795548,
            ),
        ),
    // 青色主题
    "cyan":
        (
            "white": #ffffff,
            "black": #000000,
            "primary": (
                "base": #00bcd4,
            ),
            "success": (
                "base": #009688,
            ),
            "warning": (
                "base": #ff5722,
            ),
            "danger": (
                "base": #e74c3c,
            ),
            "error": (
                "base": #e74c3c,
            ),
            "info": (
                "base": #546e7a,
            ),
        ),
    // 粉色主题
    "pink":
        (
            "white": #ffffff,
            "black": #000000,
            "primary": (
                "base": #e91e63,
            ),
            "success": (
                "base": #66bb6a,
            ),
            "warning": (
                "base": #ffa726,
            ),
            "danger": (
                "base": #ef5350,
            ),
            "error": (
                "base": #ef5350,
            ),
            "info": (
                "base": #78909c,
            ),
        )
) !default;

/* theme type */
$theme-types: (
    "light": (
        "": #ffffff,
        "page": #f2f3f5,
        "overlay": #ffffff,
    ),
    "dark": (
        "": #141414,
        "page": #0a0a0a,
        "overlay": #1d1e1f,
    ),
) !default;

// neutral color mixture value
$neutralMixtureValue: (
    // 文字
    "text":
        (
            "primary": 3%,
            "regular": 5%,
            "secondary": 8%,
            "placeholder": 12%,
            "disabled": 15%,
        ),
    // 边框
    "border":
        (
            "darker": 8%,
            "dark": 12%,
            "": 15%,
            "light": 18%,
            "lighter": 20%,
            "extra-light": 25%,
        ),
    // 填充
    "fill":
        (
            "darker": 3%,
            "dark": 5%,
            "": 8%,
            "light": 12%,
            "lighter": 15%,
            "extra-light": 18%,
            "blank": 5%,
        ),
    // 背景
    "bg":
        (
            "page": 2%,
            "": 1%,
            "overlay": 3%,
        ),
    // 特殊
    // "special":
    //     (
    //         // 几乎不混合，保持纯黑
    //         "black": 2%,
    //         // 轻微混合
    //         "white": 5%,
    //         // 不混合
    //         "transparent": 0%
    //     )
) !default;

@function to-color($value) {
    @if meta.type-of($value) == "color" {
        @return $value;
    }

    @if meta.type-of($value) == "string" {
        $clean: string.unquote(string.trim($value));

        // 直接返回 unquote 后的值，Sass 会自动处理
        @return unquote($clean);
    }

    @warn "无法转换为颜色: #{$value}";
    @return #000000;
}

// 设置 各个主题颜色的sass变量
@mixin mixColor($theme-label, $color-label, $flag, $color2) {
    $color1: map.get($theme-types, $theme-label, "");

    @if $flag == "light" {
        @for $i from 1 through 9 {
            --el-color-#{$color-label}-light-#{$i}: #{color.mix(
                    $color1,
                    $color2,
                    math.percentage(math.div($i, 10))
                )};
        }
    } @else if $flag == "dark" {
        --el-color-#{$color-label}-dark-2: #{color.mix(
                $color1,
                $color2,
                math.percentage(math.div(2, 10))
            )};
    }
}

// 设置 混合背景色
@mixin mixBgColor($theme-label, $color-type-label) {
    $color1: map.get($theme-types, $theme-label, "");
    $color2: map.get($color-types, $color-type-label, "primary", "base");
    body {
        background-color: #{color.mix($color1, $color2, 99%)};
    }
}

// 混合 中性色
@mixin setNeutralColor($theme-label, $color-type-label) {
    @each $label, $types in $neutralMixtureValue {
        $color2s: null;
        @if $theme-label == "light" {
            @if $label == "text" {
                $color2s: common.$text-color;
            } @else if $label == "border" {
                $color2s: common.$border-color;
            } @else if $label == "fill" {
                $color2s: common.$fill-color;
            } @else if $label == "bg" {
                $color2s: common.$bg-color;
            }
        } @else if($theme-label == "dark") {
            @if $label == "text" {
                $color2s: dark.$text-color;
            } @else if $label == "border" {
                $color2s: dark.$border-color;
            } @else if $label == "fill" {
                $color2s: dark.$fill-color;
            } @else if $label == "bg" {
                $color2s: dark.$bg-color;
            }
        }
        @each $type, $value in $types {
            $color1: map.get(
                $color-types,
                $color-type-label,
                "primary",
                "base"
            );

            $color2: map.get($color2s, $type);
            // @if ($theme-label == "dark") {
            //     // $color2: string.unquote($color2);
            //     // @debug meta.type-of($value: string.unquote($color2));
            // }

            @if $type == "" {
                --el-#{$label}-color: #{color.mix($color1, $color2, $value)};
            } @else {
                --el-#{$label}-color-#{$type}: #{color.mix(
                        $color1,
                        $color2,
                        $value
                    )};
            }
        }
    }
}

// 设置 root选择器
@mixin setElVar($theme-label) {
    @each $color-type-label, $color-type-value in $color-types {
        :root[theme-mode="#{$theme-label}"][theme-color="#{$color-type-label}"] {
            @each $color-label, $color-value in $color-type-value {
                @if $color-label == "white" {
                    --el-color-#{$color-label}: #{$color-value};
                } @else if $color-label == "black" {
                    --el-color-#{$color-label}: #{$color-value};
                } @else {
                    --el-color-#{$color-label}: #{map.get(
                            $color-value,
                            "base"
                        )};

                    @include mixColor(
                        $theme-label,
                        $color-label,
                        "light",
                        $color2: map.get($color-value, "base")
                    );
                    @include mixColor(
                        $theme-label,
                        $color-label,
                        "dark",
                        $color2: map.get($color-value, "base")
                    );
                }
            }

            @include mixBgColor($theme-label, $color-type-label);

            @include setNeutralColor($theme-label, $color-type-label);
        }
    }
}

// 设置 主题
@each $theme-label, $theme-value in $theme-types {
    @include setElVar($theme-label);

    :root[theme-mode="#{$theme-label}"] {
        @each $theme-bg-label, $theme-bg-color in $theme-value {
            @if $theme-bg-label == "" {
                --el-bg-color: #{$theme-bg-color};
            } @else {
                --el-bg-color-#{$theme-bg-label}: #{$theme-bg-color};
            }
        }

        body {
            background-color: map.get($theme-value, "");
        }
    }
}
